<!-- 多纵轴折线图 -->
<template>
  <div ref="chartRef" :style="{ width, height }"></div>
</template>
<script lang="ts" setup>
  import { Ref, ref, watch } from 'vue';
  import echarts from '/@/utils/lib/echarts';
  import { useECharts } from '/@/hooks/web/useECharts';
import dayjs from 'dayjs';

  const props = defineProps({
    loading: Boolean,
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '300px',
    },

    seriesVal: {
      type: Object,
      default: () => {},
    },
  });

  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  


  watch(
    () => props.loading,
    () => {
      console.log('loading',props.loading)
      if (props.loading) {
        return;
      }
      const {legend,legendSelected,xAxis,seriesData,yAxis} = props.seriesVal
      console.log('11111',props.seriesVal)
     
      if (seriesData && seriesData.length === 0) {
        setOptions({
          title: {
            textStyle: {
              color: 'grey',
              fontSize: 20,
            },
            text: '暂无数据',
            left: 'center',
            top: 'center',
          },
        });
      } else {
        let offsetLeft = 10
        let offsetRight = 20
        yAxis.forEach((item)=>{
          if(item.position === 'left'){
            offsetLeft += item.offset
          }
          if(item.position === 'right'){
            offsetRight += item.offset
          }
        })
        setOptions({
          tooltip: {
              trigger: 'axis',
              confine: true, //限制tooltip在图表范围内展示
              formatter: function (params) {
                let relVal =  params[0].data[0];
                for (var i = 0, l = params.length; i < l; i++) {
                  relVal += '<br/>' + params[i].marker + params[i].seriesName + ": " + params[i].value[1]
                  
                }
                return relVal
              }
          },
          legend: {
              data: legend,
              selected: legendSelected[0],
              type: 'scroll'
          },
          dataZoom: [{  //于区域缩放
            type: 'inside',
            start: 0,
            end: 100
          }, {
            start: 0,
            end: 10,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }],
          grid: {
            left: offsetLeft,
            right: offsetRight,
            bottom: 50,
              containLabel: true
          },
          // @ts-ignore
          xAxis: {
              type: 'time',
              boundaryGap: false,
              data: xAxis,
              axisLabel: {
                formatter: function(value) {
                  return  dayjs(value).format('YYYY-MM-DD HH:mm:ss').length > 10 ? dayjs(value).format('YYYY-MM-DD HH:mm:ss').slice(0, 10) + '\n' + dayjs(value).format('YYYY-MM-DD HH:mm:ss').slice(10) : dayjs(value).format('YYYY-MM-DD HH:mm:ss');
                }
              }
          },
          yAxis: yAxis,
          series: seriesData,

        })
      }
    },
    { immediate: true },
  );
</script>
